<template>
    <div class="app-container calendar-list-container"> 
        <!-- 搜索框，对工段信息进行搜索 -->
      <div class="filter-container">
        <el-input
                @keyup.enter.native="getData"
                clearable
                v-model="listQuery.technologyNo"
                style="width: 150px;margin-right:15px;margin-top:7px"
                class="filter-item"
                placeholder="请输入品号"
        ></el-input>
        <el-input
                @keyup.enter.native="getData"
                clearable
                v-model="listQuery.advocate"
                style="width: 150px;margin-right:15px;margin-top:7px"
                class="filter-item"
                placeholder="请输入主件品号"
        ></el-input>
        <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="getData">搜索</el-button>
      </div>

    <!-- 表单 -->
    <el-table :data="tablelList" 
    v-loading="listLoading" 
    element-loading-text="拼命加载中" 
    stripe border fit 
    highlight-current-row
    style="width: 100%"
    height="700px">
        <el-table-column label="序号" type="index" align="center"/>
        <el-table-column  label="工序ID" prop="processId" align="center"/>
        <el-table-column  label="产品编号" prop="technologyNo" align="center"/>
        <el-table-column  label="固定人时(M)" prop="manTime" align="center"/>
        <el-table-column  label="标准工时(M)" prop="manTimeFloat" align="center"/>
        <el-table-column  label="加工顺序" prop="processOrder" align="center"/>
        <el-table-column  label="工序编号" prop="processNo" align="center"/>
        <el-table-column  label="工序名称" prop="processName" align="center"/>
        <el-table-column  label="工作中心" prop="workCenter" align="center"/>
        <el-table-column  label="工序说明" prop="remark" align="center"/>
        <el-table-column  label="创建时间" prop="createTime" align="center"/>
    </el-table>

       <!-- pagination 分页 -->
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="listQuery.page"
        :page-sizes="[5,10, 20, 30, 40,100,300,500]"
        :page-size="listQuery.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>

    <el-divider></el-divider>

    </div>
</template>

<script>
import { findMainPartNumberTime } from '../../api/processRoute'
export default {
    name: 'gyworkHoursData',
    data() {
        return {
            listQuery: {                                //搜索的内容表单
                page: 1,
                limit: 10
            },
            total: 0,                                  //总的信息条数
            tablelList: [],                               //table表单的信息           
            listLoading: false,                          //table加载的动画控制条件
            userInfo: this.$store.state.user.userInfo
        }
    },
    methods: {
        async handleFilter() {
            if(!this.listQuery.technologyNo && !this.listQuery.advocate) return this.$message.error('查询条件不能为空！')
            this.listLoading = true
            let query = Object.assign({},this.listQuery)
            if(!query.technologyNo) delete query.type
            if(!query.advocate) delete query.workOrderNo
            let data = await findMainPartNumberTime(query)
            this.listLoading = false
            if(data.code == '2') return this.$message.error(data.msg)
            this.tablelList = data.data.list
            this.total = data.data.count
            this.tablelList.forEach(item => {
                item.manTime = (item.manTime/60).toFixed(2)
            });
        },
        getData() {
            this.listQuery.page = 1
            this.listQuery.limit = 10
            this.handleFilter()
        }, 
        handleSizeChange(val) {
            this.listQuery.limit = val
            this.handleFilter()
        },
        handleCurrentChange(val) {
            this.listQuery.page = val
            this.handleFilter()
        }
    },
      // 在生命周期函数调用"搜索"按钮绑定的函数，显示已有的数据
    mounted() {
        this.handleFilter()
  },
}
</script>

<style>

</style>